<!--
 * @Author: zhouwr 1551541860@qq.com
 * @Date: 2024-02-17 15:30:32
 * @LastEditors: zhouwr 1551541860@qq.com
 * @LastEditTime: 2024-02-27 21:20:20
 * @FilePath: /jeecgboot-vue3/src/views/activiti/procdef/components/ActProcessDefConfig/ConfigActivity.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!--定义表格-->
  <BasicTable @register="registerTable">
    <template #bodyCell="{ column, record }">
      <span v-if="column.key === 'id'">
        <a title="点击复制节点id" @click="handleCopy(record.id)">
          {{ record.id }}
        </a>
      </span>
    </template>
    <!--操作栏-->
    <template #action="{ record }">
      <TableAction :actions="getTableAction(record)" />
    </template>
  </BasicTable>

  <ActivityEditDrawer @register="registerActivityEditDrawer" @success="handleSuccess" />
  <ActivityOptionDrawer @register="registerActivityOptionDrawer" @success="handleSuccess" />
</template>

<script lang="ts" setup>
  import { defineProps, nextTick, onMounted, unref } from 'vue'
  import { ActionItem, BasicTable, TableAction } from '/@/components/Table'
  import { useListPage } from '/@/hooks/system/useListPage'

  import { message } from 'ant-design-vue'
  import ActivityEditDrawer from './ActivityEditDrawer.vue'
  import ActivityOptionDrawer from './ConfigActivityOption.vue'
  import { useDrawer } from '@/components/Drawer'
  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard'

  import { listFlowElement } from './ConfigActivity.api'
  import { columns } from './ConfigActivity.data'

  const props = defineProps({
    processDefId: {
      type: String,
      default: '',
    },
  })

  const { clipboardRef, copiedRef } = useCopyToClipboard()

  const { tableContext } = useListPage({
    tableProps: {
      title: '用户列表',
      api: listFlowElement,
      columns: columns,
      size: 'small',
      striped: true, //斑马纹设置
      showIndexColumn: true,
      useSearchForm: false,
      actionColumn: {
        width: 360,
      },
      beforeFetch: (params) => {
        return Object.assign(params, { processDefId: props.processDefId })
      },
      afterFetch: (data) => {
        return data.filter((d: { type: string }) => d.type.indexOf('UserTask') != -1)
      },
    },
  })

  // BasicTable绑定注册
  const [registerTable, { reload }] = tableContext

  const [registerActivityEditDrawer, { openDrawer: openActivityEditDrawer }] = useDrawer()
  const [registerActivityOptionDrawer, { openDrawer: openActivityOptionDrawer }] = useDrawer()

  function handleEdit(record: any) {
    openActivityEditDrawer(true, { record })
  }

  function handleActivityOption(record: any) {
    openActivityOptionDrawer(true, { record })
  }

  function handleDelete(record: any) {}

  function handleCopy(value: any) {
    clipboardRef.value = value
    if (unref(copiedRef)) {
      message.success('复制成功')
    }
  }

  /**
   * 成功回调
   */
  function handleSuccess() {
    reload()
  }

  /**
   * 操作栏
   */
  function getTableAction(record: any): ActionItem[] {
    return [
      {
        label: '编辑',
        onClick: handleEdit.bind(null, record),
      },
      {
        label: '删除',
        popConfirm: {
          title: '是否确认删除',
          confirm: handleDelete.bind(null, record),
          placement: 'topLeft',
        },
      },
      {
        label: '表单属性',
      },
      {
        label: '任务操作',
        onClick: handleActivityOption.bind(null, record),
      },
      {
        label: '监听器',
      },
    ]
  }

  onMounted(() => {
    nextTick(() => {
      console.log('onMounted nextTick')
    })
  })
</script>
